<template>
  <el-table-column v-if="columnType === 'index'"
                   type="index"
                   v-bind="$attrs"
                   :index="handleIndex" />
  <el-table-column v-else-if="columnType === 'input' && !inputLimit"
                   :show-overflow-tooltip="true"
                   :prop="name"
                   v-bind="$attrs">
    <template slot-scope="scope">
      <el-input v-model.trim="scope.row[name]"
                :readonly="scope.row.readonly" />
    </template>
  </el-table-column>
  <el-table-column v-else-if="columnType === 'input' && inputLimit"
                   :show-overflow-tooltip="true"
                   :prop="name"
                   v-bind="$attrs">
    <template slot-scope="scope">
      <!-- 议价前上一次费用显示 -->
      <div v-if="waybillQuoteBargain && (scope.row[`${name}FeeBefore`] || scope.row[`${name}FeeBefore`] === 0)"
           class="c-red">
        {{ scope.row[`${name}FeeBefore`] != scope.row[`${name}`]
            ? scope.row[`${name}FeeBefore`] 
            : null
          }}
      </div>
      <!-- 输入框 -->
      <el-input v-model.trim="scope.row[name]"
                :readonly="scope.row.readonly"
                @input="handleInput(scope.row, name)" />
    </template>
  </el-table-column>
  <el-table-column v-else-if="name === 'surchargeFee'"
                   :width="$attrs.sortable ? `130px` : ``"
                   :prop="name"
                   v-bind="$attrs"
                   :show-overflow-tooltip="true">
    <template slot-scope="scope">
      <div class="flex">
        <span>{{ scope.row[name] ? thousandDigit(scope.row[name], 2) : 0 }}</span>
        <!-- <SurchargeEntry v-if="scope.row[name]"
                        :surcharge-fees="surchargeFees" /> -->
      </div>
    </template>
  </el-table-column>
  <el-table-column v-else
                   :width="$attrs.sortable ? `130px` : ``"
                   :prop="name"
                   v-bind="$attrs"
                   :show-overflow-tooltip="true">
    <template slot-scope="scope">
      <span :class="columnType === 'total'?'c-primary f14':''">
        {{ scope.row[name] ? (['typeName', 'remarks'].includes(name) ? scope.row[name] : thousandDigit(scope.row[name], 2)) : (initZero ? 0 : '--')}}
      </span>
    </template>
  </el-table-column>
</template>

<script>
import SurchargeEntry from "./SurchargeEntry.vue";
import { returnThousandDigit } from "@/libs/util.js";
export default {
  name: "TableColumn",
  components: { SurchargeEntry },
  inheritAttrs: true,
  props: {
    name: {
      type: String,
    },
    type: {
      type: String,
    },
    inputLimit: {
      type: Boolean,
      default: () => false
    },
    tableColumn: {
      type: Array,
      default: () => []
    },
    initZero: {
      type: Boolean,
      default: () => false
    },
    status: {
      type: String,
      default: null
    },
    surchargeFees: {
      type: Array,
      default: () => []
    },
    waybillQuoteBargain: Boolean
  },
  computed: {
    columnType () {
      return this.type;
    }
  },
  methods: {
    thousandDigit (value, digit) {
      return returnThousandDigit(value, digit)
    },
    handleIndex (index) {
      return index + 1;
    },
    handleInput (value, name) {
      // 7位整数 2位小数
      let regStr = /^\d{0,7}(\.\d{0,2})?$/g;
      if (!regStr.test(Number(value[name]))) {
        value[name] = null
      }
      value[name] = value[name] && value[name].replace(" ", '')
      this.$emit("input", value);
    },
  }
};
</script>

<style lang="scss" scoped>
.c-red {
  color: var(--prev-color-text-purered);
}
.flex {
  display: flex;
  span {
    margin-right: 10px;
  }
}
</style>
